<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Document</title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background: red;
        }
        *{
			margin: 0;
			padding: 0;
		}
		li{
			list-style: none;
		}
		header{
			width: 100%;
			height: 30px;
			background: pink;
		}
		nav{
			width: 100%;
			height: 60px;
			background: yellow;
		}
		nav ul li{
			float: left;
		}
		footer{
			width: 100%;
			height: 30px;
			background: brown;
		}
    </style>
</head>
<body>
    <div class="a1">
            <p>action提交地址
                    method提交方法</p>
                 <form method="post" action="">
                     <input type="email">
                     <input type="button" value="提交">
                     <input type="range">
                     <input type="number">
                 </form>
    </div>
    <div class="a2">
            <p>meter:value显示,min最小值,max最大值，low最低值，high最高值，最低值大于最小值，最高值小于最大值</p>
            <meter value="0.6"></meter>
            <br>
            <p>progress:不加属性时会动，value，max</p>
            <progress></progress>
            <progress value="50" max="100"></progress>
            <br>
            <p>datalist</p>
            <input type="text" list="style">
            <datalist id="style" value="123">
                <option value="123查杰">123查杰</option>
                <option value="123伊利牛奶">123伊利牛奶</option>
                <option value="123旺旺奶糖">123旺旺奶糖</option>
            </datalist>
            <br>
            <p>detailes</p>	
            <details>
                <summary>
                    123
                </summary>
                <p>111</p>
                <p>222</p>
                <p>333</p>
            </details>			
            <p>黎黎<mark>理</mark></p>
            <p><ruby>推荐<rt>tui jian</rt></ruby>推荐推荐</p>
        
    </div>
    <div class="a3">
            <header>
                    <p>作为网页或者section的头部，每一个部分的头部都可以使用header标签，一个网页中不限制header标签的数量。</p>
                </header>
                <nav>
                    <ul>
                        <li>aa</li>
                        <li>bb</li>
                        <li>cc</li>
                        <li>dd</li>
                        <li>ee</li>
                        <li>ff</li>
                    </ul>
                </nav>
                <section>
                    <p> 文档中的节或者段或者内容区，section通常会自带标题，最好不要用，手动给他们降级。</p>
                </section>
                <article>
                    <p> article代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或者重用。如论坛的帖子、博客上的文章，一篇用户的评论，一个互动的widget小工具</p>
                    <aside>
                        <p>aside和article是配套使用的</p>
                    </aside>
                </article>
                <figure>
                    <p>标签规定独立的流内容（图片、图表、照片、代码等等）<br>元素的内容应该与主内容相关，但如被删除，则不应对文档流产生影响
                    </p>
                </figure>
                <footer>
                    <p>代表网页或者section的底部，没有个数限制，除了包裹内容不一样，其他跟header类似</p>
                </footer>
    </div>
    
    <div class="box1 box2 box3"></div>
    <div id="box" class="box" data-aaa="box"></div>
    <div>1564</div>
    <div contenteditable="true">啦啦啦啦啦</div>
</body>
<script>
        var arr = new Array()
        console.log(arr);
        console.log(Array.isArray(arr));
        var box = document.querySelector('.box1');
        console.log(Array.isArray(box.classList));
        console.log(typeof(box.classList));
        console.log(box.classList)
        box.classList.add('box2');
        console.log(box.classList)
        box.classList.add('box4');
        console.log(box.classList);
        box.classList.remove('box2');
        console.log(box.classList);
        box.classList.toggle('box5');
        console.log(box.classList);
        box.classList.toggle('box3');
        console.log(box.classList);
        



        var boo = document.getElementById('box');
        console.log(boo.getAttribute('class'));
        console.log(boo.getAttribute('data-aaa'));
        boo.setAttribute('data-aaa','boxaaa');
        console.log(boo.getAttribute('data-aaa'));

        console.log(boo.dataset.aaa);
        boo.dataset.aaa = 'bbb';
        console.log(boo.dataset.aaa);
        boo.dataset.bbb = 'boxbbb';
        console.log(boo.dataset.bbb);
    </script>
</html>